<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcss.com/element-ui/2.15.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

    <!--    <script src="/js/axios.min.js"></script>-->

</head>
<body id = "body">
<div  id="app" v-loading="loading">
    <el-menu
            mode="horizontal"
            background-color="#545c64"
            default-active="1"
            text-color="#fff"
            @select="handleSelect"
            active-text-color="#ffd04b">
        <el-menu-item index="1">检测项目管理</el-menu-item>
        <el-menu-item index="2">方案管理</el-menu-item>
        <el-menu-item index="3">质检管理</el-menu-item>
    </el-menu>
    <!-------------------------------drawer 存储过程获取产品列表 ----------------------up ------------------->
    <el-card>
        <div class="handle-table1" >
            <el-row :gutter="20" style="margin: 10px" >
                <el-col :span="2">
                    <el-button type="primary" @Click="add">新建</el-button>
                </el-col>
                <el-col :span="6">
                    <el-input v-model = "query.name" placeholder="项目名称"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @Click="search">查询</el-button>
                </el-col>
            </el-row>
            <el-table
                    ref="multipleTable"
                    :data="qualitys"
                    tooltip-effect="dark"
                    border
                    style="width: 100%;">
                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="项目名称">
                </el-table-column>
                <el-table-column
                        prop="specs"
                        label="规格">
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                @click="del(scope.row,scope.$index)"
                        >删除</el-button>
                        <span style="margin-right: 5px;margin-left: 5px"></span>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="edit(scope.row)"
                        >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--            <el-pagination-->
            <!--                    background-->
            <!--                    layout="prev, pager, next"-->
            <!--                    :page-size="query.size"-->
            <!--                    :current-page.sync = "query.index"-->
            <!--                    @current-change="searchLgtList"-->
            <!--                    :total="100">-->
            <!--            </el-pagination>-->
        </div>
    </el-card>

    <el-dialog :visible.sync="open" width="60%" append-to-body>
        <el-form ref="form" :model="formData"label-width="80px">
            <el-form-item label="项目ID" prop="name" v-if="formData.id">
                <el-input v-model="formData.id" disabled placeholder="请输入项目ID" />
            </el-form-item>
            <el-form-item label="项目名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item label="规格" prop="specs">
                <el-input v-model="formData.specs" placeholder="请输入规格" />
            </el-form-item>
            <div class="dialog-footer">
                <el-button type="primary" @Click="save">确 定</el-button>
                <el-button @click="open = false">取 消</el-button>
            </div>
        </el-form>
    </el-dialog>
</div>

</body>

<script>
    new Vue({
        el: '#app',
        created(){
            //设置全局的
            var instance = axios.create({
                timeout: 20000,
                //headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
                headers: {'Content-Type': 'application/json;charset=utf-8'}
            });
            this.$axios = instance;
            this.search();
        },
        mounted(){
        },
        beforeDestroy() {

        },
        data() {
            return {
                open:false,
                formData:{},
                query:{
                    index:0,
                    size:10,
                    name:'',
                },
                loading:false,
                qualitys:[],
            }
        },
        methods:{
            handleSelect(key, keyPath) {
                if(key == '1'){
                    window.location.href='/basePlan';
                }
                if(key == '2'){
                    window.location.href='/main';
                }
                if(key == '3'){
                    window.location.href='/quality';
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },

            /******************************************数据格式化formater down*******************************************/

            /******************************************数据格式化formater up*******************************************/


            /******************************************请求 down*******************************************/
            search(){
                let there = this;
                this.get('/basePlan/list',function (res) {
                    if(200 === res.code){
                        there.qualitys= res.data.list;
                    }else {
                        there.error(res.message);
                    }
                })
            },
            save(){
                console.log(this.formData)
                let there = this;
                this.post('/basePlan/save',this.formData,function (res) {
                    if(200 === res.code){
                        there.open = false;
                        there.search();
                        //setTimeout(window.location.href='/main',3);
                    }
                })
            },
            del(row, index){
                let there = this;
                this.get('/basePlan/del?id='+row.id,function (res) {
                    if(200 === res.code){
                        there.success(res.message);
                        there.search();
                    }else {
                        there.error(res.message);
                    }
                })
            },
            post(url,data,callback){
                this.loading = true;
                let there = this;
                this.$axios.post(url,JSON.stringify(data)).then(function (res) {
                    callback(res.data)
                    there.loading = false;
                }).catch(function (err) {
                    there.loading = false;
                    there.error(err)
                });
            },
            get(url,callback) {
                this.loading = true;
                let there = this;
                this.$axios.get(url).then(function (res) {
                    callback(res.data)
                    there.loading = false;
                }).catch(function (err) {
                    console.log(err);
                    there.loading = false;
                    there.error(err)
                });

            },
            error(mes){
                this.$message({
                    message: mes,
                    type: 'error'
                });
            },
            success(mes){
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            edit(row){
                this.formData = row
                this.open = true;
            },
            add(){
                this.formData = {}
                this.open = true;
            },
            view(row){
                window.location.href='/qualityView?id='+row.id;
            }
        },
        computed(){
        }
    })
</script>
<style>
    #body {
        margin: 0;
        padding: 0;
        background-color: #f2f2f2;
    }
    .c_head{
        background-color: #ffffff;
    }
    .c_header_left{
        float: left;
    }
    .c_header_right{
        float: right;
        margin: 10px;
    }
    .el-menu-item{
        font-weight: bold;
    }
    .c_menu_item{
        font-size: 35px;
        margin-left: 50px;
        margin-right: 50px;
    }
    .c_form_btn{
        float: right;
        margin-right: 50px;
    }
    .c_form{
        margin-bottom: 50px;
    }
    .handle-box {
        margin: 20px;
    }
    .handle-input {
        margin: 10px;
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
</html>